<template>
  <div style="margin-right: 30px">
	  <el-form ref="formObj" :model="myform" :rules="rules" label-width="100px">
		
		<el-form-item label="当前余额" >
		  <el-input v-model="myform.account" :precision="2" disabled></el-input>
		</el-form-item>
		  
	    <el-form-item label="总价" prop="totalAmount">
	      <el-input v-model="myform.totalAmount" :precision="2" disabled></el-input>
	    </el-form-item>
		
	    <el-form-item label="数量" prop="count">
	       <el-input-number v-model="count" :min="1" :max="10" @change="getTotalAmount()" />
	    </el-form-item>
		
	    <el-form-item v-if="props.cart==0" label="选择自提点" prop="storeId">
	      <el-radio-group v-model="myform.storeId">
	        <el-radio :value="2">永辉超市</el-radio>
	        <el-radio :value="1">京东便利店</el-radio>
	      </el-radio-group>
	    </el-form-item>
		
	    <el-form-item>
	      <el-button v-if="props.cart==0" type="primary" plain :icon="Save" @click="saveorder">提交订单</el-button>
		  <el-button v-else type="primary" plain :icon="Save" @click="savecart">加入购物车</el-button>
	    </el-form-item>
	  </el-form>
  </div>
</template>

<script setup>
import { getCookieForObject,setCookiesFromObject} from '@/util';
import { ElMessage,ElMessageBox } from 'element-plus';
import { ref, reactive } from 'vue'
import router from '@/router';
import { get,post } from '@/plugins/axios'
import { useRouter } from 'vue-router';
const emits = defineEmits(['update:show','getDataById'])//可触发事件
const props = defineProps(['id', 'num', 'storeId', 'userId', 'price','cart'])//接收的属性
const count = ref(1)
count.value=props.num
//const router = useRouter()
const myform = reactive({
	id:null,
    userId: props.userId,
	counts: [],
	goodsIds: [],
	storeId: props.storeId,
	price: props.price,
	totalAmount: null,
	account: null,
  cart:props.cart
})
const formObj = ref()
getTotalAmount()
function getTotalAmount(){
	myform.totalAmount= parseFloat(count.value * myform.price).toFixed(2)
	const userinfo= getCookieForObject('user')
	if (userinfo) {
	  myform.account=userinfo.account.toFixed(2)
	}
	console.dir(myform)
}
const rules = reactive({
	
	storeId: [
		{ required: true, message: '请选择自提地点', trigger: 'blur' }
	]
})
console.dir(myform)

function saveorder() {
  myform.goodsIds.push(props.id)
  console.log('count', count.value)
  myform.counts.push(count.value)
  console.log('表单数据', myform)
  if (Number(myform.account) >= Number(myform.totalAmount)) {
    post("/orders/createOrder",
        myform,
        content => {
          emits('update:show', false)
          //emits('getDataById')
          router.push({
            path: '/create-orders',
            query: { id: content }
          })
        },formObj)
  } else {
    ElMessageBox.confirm( '您的余额不足，是否充值？', '警告', {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning'
    }).then(() => {
      router.push('/recharge')
    })
  }

}
function savecart() {
	post("/cart/add", {userId:myform.userId,goodsId:props.id,count:count.value}, content =>{

		if(content!==true){
			ElMessageBox.confirm(
			    '该商品已在购物车中，是否移步购物车操作？',
			    {
			      confirmButtonText: '前往购物车',
			      cancelButtonText: '放弃',
			      type: 'warning',
			    }
			  )
			  .then(() => {

			  		ElMessage({
			  		  type: 'success',
			  		  message: '为您前往购物车',
			  		})

			    router.push({ name: 'CartIndex' })
				


			  })
			  .catch(() => {
			    ElMessage({
			      type: 'info',
			      message: '您已放弃加购',
			    })
			  })
		}
		emits('update:show', false)
		emits('getDataById')
	},formObj)
}



</script>

<style scoped lang="scss">

</style>